<template>
  <el-drawer v-model="drawer" title="新增/编辑" :before-close="handleClose">
    <el-form :model="formInline" label-width="100px">
      <div class="fz16 bold" style="margin-bottom: 25px;">授课信息</div>
      <el-form-item label="授课状态">
        <el-select v-model="formInline.teachingStatus" placeholder="授课状态" clearable>
          <el-option label="专职" value="2" />
          <el-option label="兼职" value="1" />
          <el-option label="停用" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="授课项目">
        <courseQuery v-model="formInline.teachingProgramId"></courseQuery>
      </el-form-item>
      <el-form-item label="课时">
        <el-input v-model="formInline.classHour" placeholder="课时" clearable disabled />
      </el-form-item>

      <div class="fz16 bold" style="margin: 25px 0;">讲师信息</div>
      <el-form-item label="讲师姓名">
        <el-input v-model="formInline.lecturerName" placeholder="讲师姓名" clearable disabled class="select-teacher-input">
          <template #append>
            <el-button icon="Search" @click="proxy.$refs.selectTeachingTeacherRef.open()" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="formInline.mobile" placeholder="联系电话" clearable disabled />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="formInline.remark" disabled placeholder="备注" :autosize="{ minRows: 4 }" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="证件号码">
        <el-input v-model="formInline.idCard" placeholder="证件号码" clearable />
      </el-form-item>
      <el-form-item label="教师资格证">
        <el-input v-model="formInline.teacherQualificationCertificate" placeholder="教师资格证" clearable />
      </el-form-item>
      <el-form-item label="合同起止日期">
        <datePickerRange v-model:start="formInline.contractStartTime" v-model:end="formInline.contractEndTime">
        </datePickerRange>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmClick" :loading="loading">确 认</el-button>
      </div>
    </template>

    <selectTeachingTeacher ref="selectTeachingTeacherRef" v-model:userId="formInline.lecturerId"></selectTeachingTeacher>
  </el-drawer>
</template>

<script setup lang="ts">
import selectTeachingTeacher from "@/views/courseManage/components/selectTeachingTeacher.vue";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["fatherMethods"]);

let drawer = ref(false);
let loading = ref(false);
let formInline = ref({
  teachingStatus: "",
  teachingProgramId: "",
  classHour: "",
  lecturerName: "",
  lecturerId: "",
  mobile: "",
  idCard: "",
  teacherQualificationCertificate: "", //教师资格证书
  contractStartTime: "",
  contractEndTime: "",
  remark: "",
});

function handleClose() {
  formInline.value = {
    teachingStatus: "",
    teachingProgramId: "",
    classHour: "",
    lecturerName: "",
    lecturerId: "",
    mobile: "",
    idCard: "",
    teacherQualificationCertificate: "", //教师资格证书
    contractStartTime: "",
    contractEndTime: "",
    remark: "",
  };
  emit("fatherMethods");
  drawer.value = false;
}

async function getTeacherInfo() {
  let e = await proxy.$apis.teachers({
    type: "detail",
    data: { _id: formInline.value.lecturerId },
  });
  formInline.value.lecturerName = e.lecturerName;
  formInline.value.mobile = e.mobile;
  formInline.value.remark = e.remarks;
}

function open(row) {
  if (row && row._id) {
    formInline.value = proxy.$utils.formatFunction(
      { ...row },
      { ...formInline.value }
    );
    formInline.value._id = row._id;
  }
  drawer.value = true;
}

async function confirmClick() {
  try {
    loading.value = true;
    await proxy.$apis.teachingArchives({
      type: formInline.value._id ? "update" : "add",
      data: formInline.value,
    });
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

async function getCourse() {
  let { courseDuration } = await proxy.$apis.course({
    type: "details",
    data: { _id: formInline.value.teachingProgramId },
  });
  formInline.value.classHour = courseDuration;
}

watch(
  () => formInline.value.teachingProgramId,
  (newValue, oldValue) => {
    if (newValue) getCourse();
  },
  { deep: true, immediate: true }
);

watch(
  () => formInline.value.lecturerId,
  (newValue, oldValue) => {
    if (newValue) getTeacherInfo();
  },
  { deep: true, immediate: true }
);

defineExpose({ open });
</script>


<style lang="scss">
.select-teacher-input {
  .el-input-group__append {
    background-color: var(--el-color-primary) !important;
    color: white;
  }
}
</style>
<style lang="scss" scoped>
.container {
  padding: 15px;

  .el-card {
    margin-bottom: 15px;
  }
}
</style>

